<html>
<head>
  <title>YouCube - The Blog for Cube Puzzlers</title>

  <script type="text/javascript">
      // Blog object constructor
      function Blog(body,date,image) {
          // Assign the properties
          this.body = body;
          this.date = date;
          this.image=image;


          // Return a string representation of the blog entry
          Blog.prototype.toString = function() {
              return "[" + (this.date.getMonth() + 1) + "/" + this.date.getDate() + "/" +
                  this.date.getFullYear() + "] " + this.body;
          };

          // Return a formatted HTML representation of the blog entry
          Blog.prototype.toHTML = function(highlight) {
              // Use a gray background as a highlight, if specified
              var blogHTML = "";
              blogHTML += highlight ? "<p style='background-color:#EEEEEE'>" : "<p>";
              if(this.image){
                  blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br /><table><tr><td><img src='" +
                      this.image + "'/></td><td style='vertical-align:top'>" + this.body + "</td></tr></table><em>" +
                      this.signature + "</em></p>";

              }else{
                  // Generate the formatted blog HTML code
                  blogHTML += "<strong>" + (this.date.getMonth() + 1) + "/" + this.date.getDate() + "/" +
                      this.date.getFullYear() + "</strong><br />" + this.body +"</br><em>"+this.signature+"</em></p>";

              };
              return blogHTML;
          }


          // See if the blog body contains a string of text
          Blog.prototype.containsText = function(text) {
              return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1);
          };


          Blog.prototype.signature="by Puzzler Ruby";

          Blog.blogSorter=function(blog1,blog2){

              return blog2.date-blog1.date;
          }
      }

      // Global array of blog entries
      var blog = [ new Blog("Got the new cube I ordered. It's a real pearl.", new Date("08/14/2008")),
          new Blog("Solved the new cube but of course, now I'm bored and shopping for a new one.", new Date("08/19/2008")),
          new Blog("Managed to get a headache toiling over the new cube. Gotta nap.", new Date("08/16/2008")),
          new Blog("Found a 7x7x7 cube for sale online. Yikes! That one could be a beast.", new Date("08/21/2008")),
          new Blog("Met up with some fellow cubers to discuss the prospect of a 7x7x7 cube. Mixed feelings.", new Date("08/29/2008")),
          new Blog("Went ahead and ordered the scary 7x7x7 cube. Starting a mental exercise regimen to prepare.", new Date("09/01/2008")),
          new Blog("Attended a rally outside of a local toy store that stopped carrying cube puzzles. Power to the puzzlers!", new Date("09/03/2008")),
          new Blog("Got the new 7x7x7 cube. Could be my last blog post for a while...", new Date("09/05/2008")),
          new Blog("Wow, it took me a couple of weeks but the new cube is finally solved!", new Date("09/19/2008"), "../images/cube777.png") ];

      // Show the list of blog entries
      function showBlog(numEntries) {
          // First sort the blog in reverse chronological order (most recent first)
          blog.sort(Blog.blogSorter);

          // Adjust the number of entries to show the full blog, if necessary
          if (!numEntries)
              numEntries = blog.length;

          // Show the blog entries
          var i = 0, blogListHTML = "";
          while (i < blog.length && i < numEntries) {
              blogListHTML += blog[i].toHTML(i % 2 == 0);
              i++;
          }

          // Set the blog HTML code on the page
          document.getElementById("blog").innerHTML = blogListHTML;
      }

      //拓展Date的prototype对象，新创建shortFormat函数
      Date.prototype.shortFormat=function(){
          //Date.getMonth() 返回的是0到11的数字
          return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();

      }
      // Search the list of blog entries for a piece of text
      function searchBlog() {
          var searchText = document.getElementById("searchtext").value;
          for (var i = 0; i < blog.length; i++) {
              // See if the blog entry contains the search text
              if (blog[i].containsText(searchText)) {
                  alert(blog[i]);
                  break;
              }
          }

          // If the search text wasn't found, display a message
          if (i == blog.length)
              alert("Sorry, there are no blog entries containing the search text.");
      }

      // Display a randomly chosen blog entry
      function randomBlog() {
          // Pick a random number between 0 and blog.length - 1
          var i = Math.floor(Math.random() * blog.length);
          alert(blog[i]);
      }
  </script>
</head>

<body onload="showBlog(5);">
<h3>YouCube - The Blog for Cube Puzzlers</h3>
<img src="../images/cube.png" alt="YouCube" />
<input type="button" id="search" value="Search the Blog" onclick="searchBlog();" />
<input type="text" id="searchtext" name="searchtext" value="" />
<div id="blog"></div>
<input type="button" id="showall" value="Show All Blog Entries" onclick="showBlog();" />
<input type="button" id="viewrandom" value="View a Random Blog Entry" onclick="randomBlog();" />
</body>
</html>
